<template>
  <div>
    <div class="sp1">
      <SponsorNav :data="sponsorData"></SponsorNav>
    </div>
    <carousel></carousel>
    <div style="height:23px;"></div>
    <div class="sp1">
      <div class="modbox clearfix">
        <div class="left">
          <div v-for="(item,index) in container.items" :key="item.id" v-if="item.belong == 'left'" class="mrb">
            <div :is="item.id" :ref="item.id" :moddata="item" :index="index" :data="sponsorData"></div>
          </div>
        </div>
        <div class="right">
          <div v-for="(item,index) in container.items" :key="item.id" v-if="item.belong == 'right'" class="mrb">
            <div :is="item.id" :ref="item.id" :moddata="item" :index="index" :data="sponsorData"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import SponsorNav from '../components/SponsorNav.vue'
  import Carousel from '../components/Carousel.vue'
  import myMod from '../components/myMod.vue'
  import SponsorBox from '../components/SponsorBox.vue'
  import SponsorCode from '../components/SponsorCode.vue'
  import SponsorEvents from '../components/SponsorEvents.vue'
  export default {
    components: {
      SponsorNav,
      Carousel,
      myMod,
      SponsorBox,
      SponsorCode,
      SponsorEvents
    },
    data() {
      return {
        sponsorData: {
          AllowShowSponsorInfo: true,
          DescInfo: "",
          DetailsInfo: "",
          HttpUrl: "",
          Id: 0,
          IsHide: false,
          LogoSrc: "",
          Mail: "",
          Name: "",
          Phone: "",
          PostBg: "",
          UserId: ""
        }
      }
    },
    created() {
      var that = this;
      $.ajax("/Event/Sponsor/GetSpomsorDesc", {
        type: "post",
        contentType: "application/json",
        headers: {
          ISGZIPDATA: "0"
        },
        data: JSON.stringify({
          sponsorId: that.parameters.sponsorId,
        }),
        beforeSend: function () {
          that.setAllloading(true);
        },
        success: function (data) {
          if (data.status) {
            that.sponsorData = data.result;
            if (that.parameters.action == "Sponsor") {
              document.title = data.result.Name;
            }
          }
          that.setAllloading(false);
        },
        error: function (err) {
          console.log(err)
        }
      });
    },
    computed: {
      ...mapState([
        'container',
        'pageConfig',
        'allloading',
        "parameters"
      ]),
    },
    methods: {
      ...mapMutations([
        'setAllloading'
      ])
    }
  }
</script>

<style scoped>
  .sp1 {
    width: 1280px;
    margin: 0 auto;
  }

  .left {
    width: 300px;
    float: left;
  }

  .right {
    width: 960px;
    float: right;
  }

  .mrb {
    margin-bottom: 23px;
  }
</style>
<style lang="less">
  .sponsor1 {
    .con {
      width: 100%;
      min-height: 100%;
      background: #f6f6f6;
    }
  }
</style>